<!DOCTYPE html>
<html lang="zh_hans">
    <!-- title -->




<!-- keywords -->




<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >
    <meta name="author" content="Apm29">
    <meta name="renderer" content="webkit">
    <meta name="copyright" content="Apm29">
    
    <meta name="keywords" content="hexo,hexo-theme,hexo-blog">
    
    <meta name="description" content="daily post">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>静态网站生成器 Gatsby 学习 · 生活中的Design</title>
    <style type="text/css">
    @font-face {
        font-family: 'Oswald-Regular';
        src: url("/font/Oswald-Regular.ttf");
    }

    body {
        margin: 0;
    }

    header,
    footer,
    .back-top,
    .sidebar,
    .container,
    .site-intro-meta,
    .toc-wrapper {
        display: none;
    }

    .site-intro {
        position: relative;
        z-index: 3;
        width: 100%;
        /* height: 50vh; */
        overflow: hidden;
    }

    .site-intro-placeholder {
        position: absolute;
        z-index: -2;
        top: 0;
        left: 0;
        width: calc(100% + 300px);
        height: 100%;
        background: repeating-linear-gradient(-45deg, #444 0, #444 80px, #333 80px, #333 160px);
        background-position: center center;
        transform: translate3d(-226px, 0, 0);
        animation: gradient-move 2.5s ease-out 0s infinite;
    }

    @keyframes gradient-move {
        0% {
            transform: translate3d(-226px, 0, 0);
        }
        100% {
            transform: translate3d(0, 0, 0);
        }
    }

</style>

    <link rel="preload" href= "/css/style.css?v=20180824" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    <link rel="stylesheet" href= "/css/mobile.css?v=20180824" media="(max-width: 980px)">
    
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    
    <!-- /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
/* This file is meant as a standalone workflow for
- testing support for link[rel=preload]
- enabling async CSS loading in browsers that do not support rel=preload
- applying rel preload css once loaded, whether supported or not.
*/ -->
<script>
(function( w ){
	"use strict";
	// rel=preload support test
	if( !w.loadCSS ){
		w.loadCSS = function(){};
	}
	// define on the loadCSS obj
	var rp = loadCSS.relpreload = {};
	// rel=preload feature support test
	// runs once and returns a function for compat purposes
	rp.support = (function(){
		var ret;
		try {
			ret = w.document.createElement( "link" ).relList.supports( "preload" );
		} catch (e) {
			ret = false;
		}
		return function(){
			return ret;
		};
	})();

	// if preload isn't supported, get an asynchronous load by using a non-matching media attribute
	// then change that media back to its intended value on load
	rp.bindMediaToggle = function( link ){
		// remember existing media attr for ultimate state, or default to 'all'
		var finalMedia = link.media || "all";

		function enableStylesheet(){
			link.media = finalMedia;
		}

		// bind load handlers to enable media
		if( link.addEventListener ){
			link.addEventListener( "load", enableStylesheet );
		} else if( link.attachEvent ){
			link.attachEvent( "onload", enableStylesheet );
		}

		// Set rel and non-applicable media type to start an async request
		// note: timeout allows this to happen async to let rendering continue in IE
		setTimeout(function(){
			link.rel = "stylesheet";
			link.media = "only x";
		});
		// also enable media after 3 seconds,
		// which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
		setTimeout( enableStylesheet, 3000 );
	};

	// loop through link elements in DOM
	rp.poly = function(){
		// double check this to prevent external calls from running
		if( rp.support() ){
			return;
		}
		var links = w.document.getElementsByTagName( "link" );
		for( var i = 0; i < links.length; i++ ){
			var link = links[ i ];
			// qualify links to those with rel=preload and as=style attrs
			if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){
				// prevent rerunning on link
				link.setAttribute( "data-loadcss", true );
				// bind listeners to toggle media back
				rp.bindMediaToggle( link );
			}
		}
	};

	// if unsupported, run the polyfill
	if( !rp.support() ){
		// run once at least
		rp.poly();

		// rerun poly on an interval until onload
		var run = w.setInterval( rp.poly, 500 );
		if( w.addEventListener ){
			w.addEventListener( "load", function(){
				rp.poly();
				w.clearInterval( run );
			} );
		} else if( w.attachEvent ){
			w.attachEvent( "onload", function(){
				rp.poly();
				w.clearInterval( run );
			} );
		}
	}


	// commonjs
	if( typeof exports !== "undefined" ){
		exports.loadCSS = loadCSS;
	}
	else {
		w.loadCSS = loadCSS;
	}
}( typeof global !== "undefined" ? global : this ) );
</script>

    <link rel="icon" href= "/assets/favicon.ico" />
    <link rel="preload" href="https://unpkg.com/webfontloader@1.6.28/webfontloader.js" as="script" />
    <link rel="preload" href="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js" as="script" />
    <link rel="preload" href="/scripts/main.js" as="script" />
    <link rel="preload" as="font" href="/font/Oswald-Regular.ttf" crossorigin>
    <link rel="preload" as="font" href="https://at.alicdn.com/t/font_327081_1dta1rlogw17zaor.woff" crossorigin>
    
    <!-- fancybox -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js" defer></script>
    <!-- 百度统计  -->
    
    <!-- 谷歌统计  -->
    
<meta name="generator" content="Hexo 5.4.2"></head>

    
        <body class="post-body">
    
    
<header class="header">

    <div class="read-progress"></div>
    <div class="header-sidebar-menu">&#xe775;</div>
    <!-- post页的toggle banner  -->
    
    <div class="banner">
            <div class="blog-title">
                <a href="/" >生活中的Design.</a>
            </div>
            <div class="post-title">
                <a href="#" class="post-name">静态网站生成器 Gatsby 学习</a>
            </div>
    </div>
    
    <a class="home-link" href=/>生活中的Design.</a>
</header>
    <div class="wrapper">
        <div class="site-intro" style="







height:50vh;
">
    
    <!-- 主页  -->
    
    
    <!-- 404页  -->
            
    <div class="site-intro-placeholder"></div>
    <div class="site-intro-img" style="background-image: url(/intro/post-bg.jpg)"></div>
    <div class="site-intro-meta">
        <!-- 标题  -->
        <h1 class="intro-title">
            <!-- 主页  -->
            
            静态网站生成器 Gatsby 学习
            <!-- 404 -->
            
        </h1>
        <!-- 副标题 -->
        <p class="intro-subtitle">
            <!-- 主页副标题  -->
            
            
            <!-- 404 -->
            
        </p>
        <!-- 文章页meta -->
        
            <div class="post-intros">
                <!-- 文章页标签  -->
                
                    <div class= post-intro-tags >
    
        <a class="post-tag" href="javascript:void(0);" data-tags = "前端">前端</a>
    
        <a class="post-tag" href="javascript:void(0);" data-tags = "SSG">SSG</a>
    
        <a class="post-tag" href="javascript:void(0);" data-tags = "SEO">SEO</a>
    
</div>
                
                
                    <div class="post-intro-read">
                        <span>字数统计: <span class="post-count word-count">1.8k</span>阅读时长: <span class="post-count reading-time">8 min</span></span>
                    </div>
                
                <div class="post-intro-meta">
                    <span class="post-intro-calander iconfont-archer">&#xe676;</span>
                    <span class="post-intro-time">2022/01/19</span>
                    
                    <span id="busuanzi_container_page_pv" class="busuanzi-pv">
                        <span class="iconfont-archer">&#xe602;</span>
                        <span id="busuanzi_value_page_pv"></span>
                    </span>
                    
                    <span class="shareWrapper">
                        <span class="iconfont-archer shareIcon">&#xe71d;</span>
                        <span class="shareText">Share</span>
                        <ul class="shareList">
                            <li class="iconfont-archer share-qr" data-type="qr">&#xe75b;
                                <div class="share-qrcode"></div>
                            </li>
                            <li class="iconfont-archer" data-type="weibo">&#xe619;</li>
                            <li class="iconfont-archer" data-type="qzone">&#xe62e;</li>
                            <li class="iconfont-archer" data-type="twitter">&#xe634;</li>
                            <li class="iconfont-archer" data-type="facebook">&#xe67a;</li>
                        </ul>
                    </span>
                </div>
            </div>
        
    </div>
</div>
        <script>

  // get user agent
  var browser = {
    versions: function () {
      var u = window.navigator.userAgent;
      return {
        userAgent: u,
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
        iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者安卓QQ浏览器
        iPad: u.indexOf('iPad') > -1, //是否为iPad
        webApp: u.indexOf('Safari') == -1, //是否为web应用程序，没有头部与底部
        weixin: u.indexOf('MicroMessenger') == -1, //是否为微信浏览器
        uc: u.indexOf('UCBrowser') > -1 //是否为android下的UC浏览器
      };
    }()
  }
  console.log("userAgent:" + browser.versions.userAgent);

  // callback
  function fontLoaded() {
    console.log('font loaded');
    if (document.getElementsByClassName('site-intro-meta')) {
      document.getElementsByClassName('intro-title')[0].classList.add('intro-fade-in');
      document.getElementsByClassName('intro-subtitle')[0].classList.add('intro-fade-in');
      var postIntros = document.getElementsByClassName('post-intros')[0]
      if (postIntros) {
        postIntros.classList.add('post-fade-in');
      }
    }
  }

  // UC不支持跨域，所以直接显示
  function asyncCb() {
    if (browser.versions.uc) {
      console.log("UCBrowser");
      fontLoaded();
    } else {
      WebFont.load({
        custom: {
          families: ['Oswald-Regular']
        },
        loading: function () {  //所有字体开始加载
          // console.log('loading');
        },
        active: function () {  //所有字体已渲染
          fontLoaded();
        },
        inactive: function () { //字体预加载失败，无效字体或浏览器不支持加载
          console.log('inactive: timeout');
          fontLoaded();
        },
        timeout: 5000 // Set the timeout to two seconds
      });
    }
  }

  function asyncErr() {
    console.warn('script load from CDN failed, will load local script')
  }

  // load webfont-loader async, and add callback function
  function async(u, cb, err) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (cb) { o.addEventListener('load', function (e) { cb(null, e); }, false); }
    if (err) { o.addEventListener('error', function (e) { err(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }

  var asyncLoadWithFallBack = function (arr, success, reject) {
    var currReject = function () {
      reject()
      arr.shift()
      if (arr.length)
        async(arr[0], success, currReject)
    }

    async(arr[0], success, currReject)
  }

  asyncLoadWithFallBack([
    "https://unpkg.com/webfontloader@1.6.28/webfontloader.js",
    "https://cdn.bootcss.com/webfont/1.6.28/webfontloader.js",
    "/lib/webfontloader.min.js"
  ], asyncCb, asyncErr)
</script>
        
        <img class="loading" src="/assets/loading.svg" style="display: block; margin: 6rem auto 0 auto; width: 6rem; height: 6rem;" />
        <div class="container container-unloaded">
            <main class="main post-page">
    <article class="article-entry">
        <h1 id="1-环境设置"><a href="#1-环境设置" class="headerlink" title="1.环境设置"></a>1.环境设置</h1><h2 id="GIT"><a href="#GIT" class="headerlink" title="GIT"></a>GIT</h2><p>略</p>
<h2 id="Node-js"><a href="#Node-js" class="headerlink" title="Node.js"></a>Node.js</h2><p>略</p>
<h2 id="Gatsby-CLI-安装"><a href="#Gatsby-CLI-安装" class="headerlink" title="Gatsby CLI 安装"></a>Gatsby CLI 安装</h2><p>npm安装 <code>npm i -g gatsby-cli</code><br>查看版本 <code>gatsby --version</code></p>
<h1 id="2-部署首个静态站"><a href="#2-部署首个静态站" class="headerlink" title="2.部署首个静态站"></a>2.部署首个静态站</h1><h2 id="示意图"><a href="#示意图" class="headerlink" title="示意图"></a>示意图</h2><p><img src="https://www.gatsbyjs.com/static/0fd27b745c1de708f034eaf97c4416e0/d61c2/deployment-workflow.png" alt="示意图"></p>
<h2 id="新建Gatsby站点"><a href="#新建Gatsby站点" class="headerlink" title="新建Gatsby站点"></a>新建Gatsby站点</h2><p><code>gatsby new</code>,按要求输入站点信息,输入站点名称和文件夹路径后，其他选项先选No(或者稍后添加)，完成之后，gatsby会生成必要的文件</p>
<h2 id="本地运行"><a href="#本地运行" class="headerlink" title="本地运行"></a>本地运行</h2><p>进入创建的文件夹下，运行命令<code>gatsby develop</code>,(也可以使用npm等：<code>npm run develop</code>)</p>
<p>如果一切正常的话，本地服务将会成功运行在8000端口</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">You can now view my-first-gatsby-site in the browser.</span><br><span class="line"></span><br><span class="line">  http://localhost:8000/</span><br><span class="line">⠀</span><br><span class="line">View GraphiQL, an in-browser IDE, to explore your site&#x27;s data and schema</span><br><span class="line"></span><br><span class="line">  http://localhost:8000/___graphql</span><br></pre></td></tr></table></figure>

<p>打开浏览器，转到<code>http://localhost:8000</code>,可以看到我们的第一个gatsby页面：<br><img src="https://www.gatsbyjs.com/static/b79cb66545b144295a8c6a5efeaafb20/94cea/localhost-new-site.png" alt="first page"></p>
<h2 id="把本地代码上传到Github"><a href="#把本地代码上传到Github" class="headerlink" title="把本地代码上传到Github"></a>把本地代码上传到Github</h2><p>命令行或者Github网站内把本地代码push上去</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">git remote add origin https://github.com/YOUR_GITHUB_USERNAME/YOUR_GITHUB_REPO_NAME.git</span><br><span class="line"></span><br><span class="line">git branch -M main</span><br><span class="line"></span><br><span class="line">git push -u origin main</span><br></pre></td></tr></table></figure>

<h2 id="连接Github-Repo和Gatsby-Cloud"><a href="#连接Github-Repo和Gatsby-Cloud" class="headerlink" title="连接Github Repo和Gatsby Cloud"></a>连接Github Repo和Gatsby Cloud</h2><p>前往Gatsby Cloud首页添加站点，按提示输入信息就行</p>
<h2 id="使用React"><a href="#使用React" class="headerlink" title="使用React"></a>使用React</h2><h3 id="新建页面"><a href="#新建页面" class="headerlink" title="新建页面"></a>新建页面</h3><p>在src/pages下新建一个页面文件about.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Step 1: Import React</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Step 2: Define your component</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">AboutPage</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line"></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">main</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">title</span>&gt;</span>About Me<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">h1</span>&gt;</span>About Me<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">p</span>&gt;</span>Hi there! I&#x27;m the proud creator of this site, which I built with Gatsby.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">  )</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// Step 3: Export your component</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">AboutPage</span></span><br></pre></td></tr></table></figure>

<p>然后访问<code>localhost:8000/about</code>,可以看到成果：<br><img src="https://www.gatsbyjs.com/static/51a6cf2b743248bf809025d7e6b4b3ba/f1d1f/about-page.png" alt="abort"></p>
<blockquote>
<p>src/pages文件夹下的js文件会对应文件名称生成页面路由，例如新建mine.js文件，域名/mine将会展示文件对应页面</p>
</blockquote>
<h3 id="使用Link组件"><a href="#使用Link组件" class="headerlink" title="使用Link组件"></a>使用Link组件</h3><p>新建的页面在GATSBY中被称为Page组件，我们需要了解下其他的被称为“积木”的组件<br><img src="https://www.gatsbyjs.com/static/e956cd45d790934484f0d93643c87cc7/e0449/ui-built-from-components.png" alt="page"><br>上图中NavBar/ProductCard等都可以称为积木组件（Building-Block Components）,这些组件我们可以在站点其他地方复用</p>
<p><code>Link</code>组件是Gatsby内建的组件,类似于Html中的<code>&lt;a&gt;</code>标签,<code>Link</code>带有to属性，类似于a标签的href，但是它接收页面path（比如我们上文中建的/abort）</p>
<h3 id="创建可复用的布局组件"><a href="#创建可复用的布局组件" class="headerlink" title="创建可复用的布局组件"></a>创建可复用的布局组件</h3><p>在实际网站中有些页面需要复用固定的布局，比如多个页面相同的导航栏、侧边栏、底边栏，可以抽取Layout组件来复用</p>
<p>带children的组件：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;Link to=&quot;/&quot;&gt;</span><br><span class="line">This text is passed into the Link component&#x27;s children prop!</span><br><span class="line">&lt;/Link&gt;</span><br></pre></td></tr></table></figure>

<p>我们在<code>src/components/layout.js</code>创建我们的组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Link</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;gatsby&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Layout</span> = (<span class="params">&#123; pageTitle, children &#125;</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">title</span>&gt;</span>&#123;pageTitle&#125;<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">nav</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/&quot;</span>&gt;</span>Home<span class="tag">&lt;/<span class="name">Link</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/about&quot;</span>&gt;</span>About<span class="tag">&lt;/<span class="name">Link</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">main</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;pageTitle&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        &#123;children&#125;</span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  )</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">Layout</span></span><br></pre></td></tr></table></figure>

<p>更新下我们的首页文件：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Layout</span> <span class="keyword">from</span> <span class="string">&#x27;../components/layout&#x27;</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">IndexPage</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">Layout</span> <span class="attr">pageTitle</span>=<span class="string">&quot;Home Page&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">p</span>&gt;</span>I&#x27;m making this by following the Gatsby Tutorial.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">Layout</span>&gt;</span></span></span><br><span class="line">  )</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">IndexPage</span></span><br></pre></td></tr></table></figure>

<p>更新下about页面：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">import * as React from &#x27;react&#x27;</span><br><span class="line">import Layout from &#x27;../components/layout&#x27;</span><br><span class="line">const AboutPage = () =&gt; &#123;</span><br><span class="line">  return (</span><br><span class="line">    &lt;Layout pageTitle=&quot;About Me&quot;&gt;</span><br><span class="line">      &lt;p&gt;Hi there! I&#x27;m the proud creator of this site, which I built with Gatsby.&lt;/p&gt;</span><br><span class="line">    &lt;/Layout&gt;</span><br><span class="line">  )</span><br><span class="line">&#125;</span><br><span class="line">export default AboutPage</span><br></pre></td></tr></table></figure>

<p><img src="https://www.gatsbyjs.com/static/2bb409ab1579861c6d21fbcefc8aa216/f1d1f/index-page-with-layout.png" alt="home"><br><img src="https://www.gatsbyjs.com/static/6afc66d0050f0a65bc2018f46e2fc11d/f1d1f/about-page-with-layout.png" alt="about"></p>
<h3 id="使用CSS-Module为组件添加样式"><a href="#使用CSS-Module为组件添加样式" class="headerlink" title="使用CSS Module为组件添加样式"></a>使用CSS Module为组件添加样式</h3><p>我们为layout组件添加一些css样式<br>1.首先新建一个<code>src/components/layout.module.css</code>文件<br>2.添加一个container类</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: auto;</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">500px</span>;</span><br><span class="line">  <span class="attribute">font-family</span>: sans-serif;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>3.在layout.js中导入</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; container &#125; <span class="keyword">from</span> <span class="string">&#x27;./layout.module.css&#x27;</span></span><br></pre></td></tr></table></figure>

<p>设置className:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Link</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;gatsby&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; container &#125; <span class="keyword">from</span> <span class="string">&#x27;./layout.module.css&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Layout</span> = (<span class="params">&#123; pageTitle, children &#125;</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&#123;container&#125;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">title</span>&gt;</span>&#123;pageTitle&#125;<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">nav</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/&quot;</span>&gt;</span>Home<span class="tag">&lt;/<span class="name">Link</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/about&quot;</span>&gt;</span>About<span class="tag">&lt;/<span class="name">Link</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">main</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;pageTitle&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        &#123;children&#125;</span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  )</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">Layout</span></span><br></pre></td></tr></table></figure>

<h1 id="3-使用插件添加额外功能"><a href="#3-使用插件添加额外功能" class="headerlink" title="3.使用插件添加额外功能"></a>3.使用插件添加额外功能</h1><p>插件库地址: <a target="_blank" rel="noopener" href="https://www.gatsbyjs.com/plugins">Gatsby Plugin Library | Search 2500+ Plugins | Gatsby (gatsbyjs.com)</a></p>
<p>插件配置文件：<code>gatsby-config.js</code></p>
<ul>
<li>在 Gatsby 术语中，插件是一个单独的 npm 包，您可以安装它以向您的站点添加额外的功能。</li>
<li>有各种各样的插件，每个插件都有不同的用例。一些插件提供预先构建的组件，其他插件添加分析，其他插件允许您将数据提取到您的站点。一些插件由 Gatsby 员工构建，而其他插件由社区成员构建和维护。到目前为止，有超过 2,600 个插件可供选择。您可以使用 Gatsby 插件库浏览所有可用的插件。</li>
</ul>
<p>插件安装方法：<br>1.使用npm等工具安装<br>2.在<code>gatsby-config.js</code>文件中修改配置<br>3.根据需要使用您网站中的插件功能。</p>
<p>举个例子:<br>首先<br><code>npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem</code><br>然后添加<code>gatsby-plugin-image</code>、 <code>gatsby-plugin-sharp</code>到配置文件：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="attr">siteMetadata</span>: &#123;</span><br><span class="line">        <span class="attr">siteUrl</span>: <span class="string">`https://www.yourdomain.tld`</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">plugins</span>: [</span><br><span class="line">        <span class="string">&quot;gatsby-plugin-image&quot;</span>,</span><br><span class="line">        <span class="string">&quot;gatsby-plugin-sharp&quot;</span>,</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>最后就可以在项目中使用StaticImage组件了</p>
<blockquote>
<p>The <code>StaticImage</code> component requires a few additional plugins to work. These extra plugins are called <strong>peer dependencies</strong>, and you’ll need to install them along with the <code>gatsby-plugin-image</code> package:</p>
</blockquote>
<ul>
<li><code>gatsby-plugin-sharp</code>: Handles the actual image processing that is used by <code>gatsby-plugin-image</code>.</li>
<li><code>gatsby-source-filesystem</code>: Lets you pull in data from your computer’s filesystem. (You’ll learn more about this plugin later. Just install it for now.)</li>
</ul>
<p><strong>Tip:</strong> When adding a new plugin to your site, check the plugin README in the <a target="_blank" rel="noopener" href="https://www.gatsbyjs.com/plugins">Gatsby Plugin Library</a> to see if there are any special setup instructions.</p>
<ul>
<li>StaticImage 的src属性支持url和本地路径</li>
</ul>
<h1 id="4-在项目中使用GraphQL"><a href="#4-在项目中使用GraphQL" class="headerlink" title="4.在项目中使用GraphQL"></a>4.在项目中使用GraphQL</h1><p>首先，GATSBY的数据储存在一个或多个数据源内，数据源可以是本地的文件夹，也可以是像WordPress这样的CMS系统，或者是普通的数据库。</p>
<p>首先需要添加<b><code>source plugin</code></b>,每个source plugin都旨在与特定源进行通信。当您构建站点时，每个source plugin都会从其特定源中提取数据并将其添加到您站点的 GraphQL 数据层。(数据源插件基本都是gatsby-source-开头的，可以去插件库搜索下)</p>
<p><img src="https://www.gatsbyjs.com/static/e45422900475b86807bc002fb6863b85/10d53/data-layer.png" alt="数据层示意图"></p>
<p>当您为您的站点启动本地开发服务器时，Gatsby 会自动创建一个特殊的端点，让您可以使用名为 GraphiQL 的浏览器内工具。使用 GraphiQL，您可以探索站点的数据并构建 GraphQL 查询。<code>http://localhost:8000/___graphql</code></p>
<p><img src="https://www.gatsbyjs.com/static/c6b53975530da3347f0e0d12fc175208/84a90/graphiql.png" alt="graphQL"></p>
<blockquote>
<p>左边是Explorer，中间是查询编辑器，右边是查询结果</p>
</blockquote>
<p>我们试着查询下gatsby-config.js中的数据：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">query MyQuery &#123;</span><br><span class="line">  site &#123;</span><br><span class="line">    siteMetadata &#123;</span><br><span class="line">      title</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>点击播放按钮得到结果：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;data&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;site&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;siteMetadata&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;title&quot;</span><span class="punctuation">:</span> <span class="string">&quot;My First Gatsby Site&quot;</span></span><br><span class="line">      <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;extensions&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span><span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<p>然后我们试着吧查询放到Layout组件里去：</p>
<ul>
<li><p>首先导入所需的 <code>import &#123; Link, useStaticQuery, graphql &#125; from &#39;gatsby&#39;</code></p>
</li>
<li><p>使用useStaticQuery查询：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> data = <span class="title function_">useStaticQuery</span>(graphql<span class="string">`</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  query &#123;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    site &#123;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">      siteMetadata &#123;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        title</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">      &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">`</span>)</span><br></pre></td></tr></table></figure></li>
<li><p>把数据放到header里</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;title&gt;&#123;pageTitle&#125; | &#123;data.site.siteMetadata.title&#125;&lt;/title&gt;</span><br><span class="line"></span><br><span class="line">&lt;header&gt;&#123;data.site.siteMetadata.title&#125;&lt;/header&gt;</span><br></pre></td></tr></table></figure>

</li>
</ul>

    </article>
    <!-- license  -->
    
        <div class="license-wrapper">
            <p>原文作者：<a href="https://apm29.github.io">Apm29</a>
            <p>原文链接：<a href="https://apm29.github.io/2022/01/19/%E9%9D%99%E6%80%81%E7%BD%91%E7%AB%99%E7%94%9F%E6%88%90%E5%99%A8-Gatsby-%E5%AD%A6%E4%B9%A0/">https://apm29.github.io/2022/01/19/%E9%9D%99%E6%80%81%E7%BD%91%E7%AB%99%E7%94%9F%E6%88%90%E5%99%A8-Gatsby-%E5%AD%A6%E4%B9%A0/</a>
            <p>发表日期：<a href="https://apm29.github.io/2022/01/19/%E9%9D%99%E6%80%81%E7%BD%91%E7%AB%99%E7%94%9F%E6%88%90%E5%99%A8-Gatsby-%E5%AD%A6%E4%B9%A0/">January 19th 2022, 2:30:20 pm</a>
            <p>更新日期：<a href="https://apm29.github.io/2022/01/19/%E9%9D%99%E6%80%81%E7%BD%91%E7%AB%99%E7%94%9F%E6%88%90%E5%99%A8-Gatsby-%E5%AD%A6%E4%B9%A0/">January 20th 2022, 9:41:09 am</a>
            <p>版权声明：本文采用<a rel="license noopener" target="_blank" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可</p>
        </div>
    
    <!-- paginator  -->
    <ul class="post-paginator">
        <li class="next">
            
                <div class="nextSlogan">Next Post</div>
                <a href= "/2022/05/27/VSCode%E9%85%8D%E7%BD%AE%E4%B8%8E%E6%8F%92%E4%BB%B6(Vue%E5%BC%80%E5%8F%91)/" title= "VSCode配置与插件（Vue开发）">
                    <div class="nextTitle">VSCode配置与插件（Vue开发）</div>
                </a>
            
        </li>
        <li class="previous">
            
                <div class="prevSlogan">Previous Post</div>
                <a href= "/2021/12/21/Kotlin%E5%8D%8F%E7%A8%8B%E7%9B%B8%E5%85%B3/" title= "Kotlin协程相关">
                    <div class="prevTitle">Kotlin协程相关</div>
                </a>
            
        </li>
    </ul>
    <!-- 评论插件 -->
    <!-- 来必力City版安装代码 -->

<!-- City版安装代码已完成 -->
    
    
    <!-- partial('_partial/comment/changyan') -->
    <!--PC版-->


    
    

    <!-- 评论 -->
</main>
            <!-- profile -->
            
        </div>
        <footer class="footer footer-unloaded">
    <!-- social  -->
    
    <div class="social">
        
    
        
            
                <a href="mailto:yjw999wow@gmail.com" class="iconfont-archer email" title=email ></a>
            
        
    
        
            
                <a href="//github.com/apm29" class="iconfont-archer github" target="_blank" title=github></a>
            
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    

    </div>
    
    <!-- powered by Hexo  -->
    <div class="copyright">
        <span id="hexo-power">Powered by <a href="https://hexo.io/" target="_blank">Hexo</a></span><span class="iconfont-archer power">&#xe635;</span><span id="theme-info">theme <a href="https://github.com/fi3ework/hexo-theme-archer" target="_blank">Archer</a></span>
    </div>
    <div style="text-align: center">
        <img src="">
        <a href="https://beian.miit.gov.cn/"  style="color:#f72b07" target="_blank">浙ICP备20011000号-1</a>
    </div>
    <!-- 不蒜子  -->
    
    <div class="busuanzi-container">
    
    
    <span id="busuanzi_container_site_pv">PV: <span id="busuanzi_value_site_pv"></span> :)</span>
    
    </div>
    
</footer>

    </div>
    <!-- toc -->
    
    <div class="toc-wrapper" style=
    







top:50vh;

    >
        <div class="toc-catalog">
            <span class="iconfont-archer catalog-icon">&#xe613;</span><span>CATALOG</span>
        </div>
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#1-%E7%8E%AF%E5%A2%83%E8%AE%BE%E7%BD%AE"><span class="toc-number">1.</span> <span class="toc-text">1.环境设置</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#GIT"><span class="toc-number">1.1.</span> <span class="toc-text">GIT</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js"><span class="toc-number">1.2.</span> <span class="toc-text">Node.js</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Gatsby-CLI-%E5%AE%89%E8%A3%85"><span class="toc-number">1.3.</span> <span class="toc-text">Gatsby CLI 安装</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2-%E9%83%A8%E7%BD%B2%E9%A6%96%E4%B8%AA%E9%9D%99%E6%80%81%E7%AB%99"><span class="toc-number">2.</span> <span class="toc-text">2.部署首个静态站</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A4%BA%E6%84%8F%E5%9B%BE"><span class="toc-number">2.1.</span> <span class="toc-text">示意图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B0%E5%BB%BAGatsby%E7%AB%99%E7%82%B9"><span class="toc-number">2.2.</span> <span class="toc-text">新建Gatsby站点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%AC%E5%9C%B0%E8%BF%90%E8%A1%8C"><span class="toc-number">2.3.</span> <span class="toc-text">本地运行</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8A%8A%E6%9C%AC%E5%9C%B0%E4%BB%A3%E7%A0%81%E4%B8%8A%E4%BC%A0%E5%88%B0Github"><span class="toc-number">2.4.</span> <span class="toc-text">把本地代码上传到Github</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%9E%E6%8E%A5Github-Repo%E5%92%8CGatsby-Cloud"><span class="toc-number">2.5.</span> <span class="toc-text">连接Github Repo和Gatsby Cloud</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8React"><span class="toc-number">2.6.</span> <span class="toc-text">使用React</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B0%E5%BB%BA%E9%A1%B5%E9%9D%A2"><span class="toc-number">2.6.1.</span> <span class="toc-text">新建页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8Link%E7%BB%84%E4%BB%B6"><span class="toc-number">2.6.2.</span> <span class="toc-text">使用Link组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84%E5%B8%83%E5%B1%80%E7%BB%84%E4%BB%B6"><span class="toc-number">2.6.3.</span> <span class="toc-text">创建可复用的布局组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8CSS-Module%E4%B8%BA%E7%BB%84%E4%BB%B6%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F"><span class="toc-number">2.6.4.</span> <span class="toc-text">使用CSS Module为组件添加样式</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-%E4%BD%BF%E7%94%A8%E6%8F%92%E4%BB%B6%E6%B7%BB%E5%8A%A0%E9%A2%9D%E5%A4%96%E5%8A%9F%E8%83%BD"><span class="toc-number">3.</span> <span class="toc-text">3.使用插件添加额外功能</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#4-%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8GraphQL"><span class="toc-number">4.</span> <span class="toc-text">4.在项目中使用GraphQL</span></a></li></ol>
    </div>
    
    <div class="back-top iconfont-archer">&#xe639;</div>
    <div class="sidebar sidebar-hide">
    <ul class="sidebar-tabs sidebar-tabs-active-0">
        <li class="sidebar-tab-archives"><span class="iconfont-archer">&#xe67d;</span><span class="tab-name">Archive</span></li>
        <li class="sidebar-tab-tags"><span class="iconfont-archer">&#xe61b;</span><span class="tab-name">Tag</span></li>
        <li class="sidebar-tab-categories"><span class="iconfont-archer">&#xe666;</span><span class="tab-name">Cate</span></li>
    </ul>
    <div class="sidebar-content sidebar-content-show-archive">
          <div class="sidebar-panel-archives">
    <!-- 在ejs中将archive按照时间排序 -->
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <div class="total-and-search">
        <div class="total-archive">
        Total : 44
        </div>
        <!-- search  -->
        
    </div>
    
    <div class="post-archive">
    
    
    
    
    <div class="archive-year"> 2022 </div>
    <ul class="year-list">
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/06</span><a class="archive-post-title" href= "/2022/07/06/%E4%BD%BF%E7%94%A8KeepAlive%E5%8A%A8%E6%80%81%E7%BC%93%E5%AD%98%E6%A0%87%E7%AD%BE%E9%A1%B5/" >使用KeepAlive动态缓存标签页</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/05</span><a class="archive-post-title" href= "/2022/07/05/SheetJS%20--%20%E5%89%8D%E7%AB%AF(%E6%B5%8F%E8%A7%88%E5%99%A8)%E5%AF%BC%E5%87%BAExcel%E6%96%87%E4%BB%B6/" >SheetJS -- 前端(浏览器)导出Excel文件</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/22</span><a class="archive-post-title" href= "/2022/06/22/%E9%92%89%E9%92%89H5%E5%BA%94%E7%94%A8%E8%B8%A9%E5%9D%91(1)/" >钉钉H5应用踩坑(1)</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/20</span><a class="archive-post-title" href= "/2022/06/20/%E4%BD%BF%E7%94%A8-vue-composition-api/" >使用@vue/composition-api</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/06</span><a class="archive-post-title" href= "/2022/06/06/Python%E6%B8%85%E9%99%A4NodeModules%E6%96%87%E4%BB%B6%E5%A4%B9%E8%84%9A%E6%9C%AC/" >Python清除NodeModules文件夹脚本</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/06</span><a class="archive-post-title" href= "/2022/06/06/%E5%AF%B9%E6%9C%80%E8%BF%91%E5%86%99%E7%9A%84Android%E5%BA%94%E7%94%A8%E7%9A%84%E6%80%BB%E7%BB%93(1)/" >对最近写的Android应用的总结(1)</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">05/31</span><a class="archive-post-title" href= "/2022/05/31/Vite-Plugin-Pages%E4%B8%8EKeep-Alive/" >Vite-Plugin-Pages与Keep-Alive</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">05/27</span><a class="archive-post-title" href= "/2022/05/27/VSCode%E9%85%8D%E7%BD%AE%E4%B8%8E%E6%8F%92%E4%BB%B6(Vue%E5%BC%80%E5%8F%91)/" >VSCode配置与插件（Vue开发）</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">01/19</span><a class="archive-post-title" href= "/2022/01/19/%E9%9D%99%E6%80%81%E7%BD%91%E7%AB%99%E7%94%9F%E6%88%90%E5%99%A8-Gatsby-%E5%AD%A6%E4%B9%A0/" >静态网站生成器 Gatsby 学习</a>
        </li>
    
    
    
    
    
        </ul>
    
    <div class="archive-year"> 2021 </div>
    <ul class="year-list">
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/21</span><a class="archive-post-title" href= "/2021/12/21/Kotlin%E5%8D%8F%E7%A8%8B%E7%9B%B8%E5%85%B3/" >Kotlin协程相关</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">08/09</span><a class="archive-post-title" href= "/2021/08/09/%E5%88%9D%E8%AF%86Ktorm/" >初识Ktorm</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">08/05</span><a class="archive-post-title" href= "/2021/08/05/NUXTJS%E7%9A%84%E5%A4%9A%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/" >NUXTJS的多环境配置</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">08/05</span><a class="archive-post-title" href= "/2021/08/05/NuxtJS%E9%9D%9E%E6%A0%B9%E7%9B%AE%E5%BD%95%E4%B8%8B%E9%83%A8%E7%BD%B2/" >NuxtJS非根目录下部署</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/24</span><a class="archive-post-title" href= "/2021/07/24/%E4%BD%BF%E7%94%A8vue-sfc-rollup%E5%88%9B%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84NPM%E5%BA%93/" >使用vue-sfc-rollup创建自己的NPM库</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/19</span><a class="archive-post-title" href= "/2021/07/19/Certbot%E7%94%9F%E6%88%90Https%E8%AF%81%E4%B9%A6/" >Certbot生成Https证书</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/19</span><a class="archive-post-title" href= "/2021/07/19/Ubuntu%E4%B8%ADMysql5-0%E9%87%8D%E6%96%B0%E5%AE%89%E8%A3%85%E4%B8%8E%E5%88%9D%E5%A7%8B%E5%8C%96/" >Ubuntu中Mysql5.0重新安装与初始化</a>
        </li>
    
    
    
    
    
        </ul>
    
    <div class="archive-year"> 2020 </div>
    <ul class="year-list">
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">10/28</span><a class="archive-post-title" href= "/2020/10/28/JetPack-Navigation%E4%B8%ADFragment%E7%9A%84%E8%BF%94%E5%9B%9E%E9%94%AE%E6%8B%A6%E6%88%AA/" >JetPack-Navigation中Fragment的返回键拦截</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/07</span><a class="archive-post-title" href= "/2020/07/07/Flutter%E5%9B%BD%E9%99%85%E5%8C%96flutter-intl/" >Flutter国际化flutter_intl</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/18</span><a class="archive-post-title" href= "/2020/06/18/Vue%E9%A1%B9%E7%9B%AE%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E5%AE%9E%E8%B7%B5%EF%BC%88%E5%AE%9E%E7%8E%B0%E5%8A%A8%E6%80%81%E6%9D%83%E9%99%90%EF%BC%89/" >Vue项目动态路由实践（实现动态权限）</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">05/29</span><a class="archive-post-title" href= "/2020/05/29/%E7%94%A8%E5%88%86%E6%B2%BB%E6%80%9D%E6%83%B3%E9%9D%9E%E9%80%92%E5%BD%92%E8%8E%B7%E5%8F%96N%E4%B8%AA%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E7%9A%84%E7%BB%84%E5%90%88/" >用分治思想非递归获取N个数组元素的组合</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">03/23</span><a class="archive-post-title" href= "/2020/03/23/TravisCi-Gradle%E9%83%A8%E7%BD%B2SpringBoot%E9%A1%B9%E7%9B%AE%E5%88%B0aliyun-ECS/" >TravisCi/Gradle部署SpringBoot项目到aliyun ECS</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">01/07</span><a class="archive-post-title" href= "/2020/01/07/Linux-OSX-%E5%91%BD%E4%BB%A4/" >Linux/OSX 命令</a>
        </li>
    
    
    
    
    
        </ul>
    
    <div class="archive-year"> 2019 </div>
    <ul class="year-list">
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/23</span><a class="archive-post-title" href= "/2019/12/23/%E7%94%A8Flutter%E9%87%8D%E6%9E%84%E5%BA%94%E7%94%A8/" >用Flutter重构应用</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/20</span><a class="archive-post-title" href= "/2019/12/20/Docker%E7%AC%94%E8%AE%B0/" >Docker笔记</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/19</span><a class="archive-post-title" href= "/2019/12/19/Hexo/" >Hexo</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/19</span><a class="archive-post-title" href= "/2019/12/19/Android-Text-measure-draw/" >Android Text measure/draw</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/19</span><a class="archive-post-title" href= "/2019/12/19/Flutter-WebView-%E9%94%AE%E7%9B%98%E9%97%AE%E9%A2%98/" >Flutter WebView 键盘问题</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/19</span><a class="archive-post-title" href= "/2019/12/19/Git-Submodule-%E5%AD%90%E6%A8%A1%E5%9D%97/" >Git Submodule(子模块)</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/18</span><a class="archive-post-title" href= "/2019/12/18/Android-Webview%E8%AE%BE%E7%BD%AECookie/" >Android Webview设置Cookie</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/18</span><a class="archive-post-title" href= "/2019/12/18/NPM%E8%AE%BE%E7%BD%AERegistry/" >NPM设置Registry</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/17</span><a class="archive-post-title" href= "/2019/12/17/LiveData/" >LiveData</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/13</span><a class="archive-post-title" href= "/2019/12/13/AndroidDevMetrics/" >AndroidDevMetrics</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/CustomPainter/" >CustomPaint</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Dart%E5%AD%A6%E4%B9%A0/" >Dart 语法</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Databinding%20in%20kotlin/" >DataBinding in kotlin</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Gradle%E5%AD%A6%E4%B9%A0/" >Gradle与Groovy</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/JetpackSetup/" >Jetpack</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/PDFViewerInAndroid/" >PDFViewer on Android</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Navigation/" >Navigation初探</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/RxCache/" >RxCache</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/RxLifecycle%E5%AD%A6%E4%B9%A0/" >RxLifecycle</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Spring/" >SpringFrameWork</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/TextView%E4%B8%AD%E6%98%BE%E7%A4%BAHtml%E5%86%85%E5%AE%B9/" >在TextView中显示Html格式的文字</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/flutter/" >Flutter</a>
        </li>
    
    </div>
  </div>
        <div class="sidebar-panel-tags">
    <div class="sidebar-tags-name">
    
        <span class="sidebar-tag-name" data-tags="Android"><span class="iconfont-archer">&#xe606;</span>Android</span>
    
        <span class="sidebar-tag-name" data-tags="JetPack"><span class="iconfont-archer">&#xe606;</span>JetPack</span>
    
        <span class="sidebar-tag-name" data-tags="Tools"><span class="iconfont-archer">&#xe606;</span>Tools</span>
    
        <span class="sidebar-tag-name" data-tags="Linux"><span class="iconfont-archer">&#xe606;</span>Linux</span>
    
        <span class="sidebar-tag-name" data-tags="Flutter"><span class="iconfont-archer">&#xe606;</span>Flutter</span>
    
        <span class="sidebar-tag-name" data-tags="Dart"><span class="iconfont-archer">&#xe606;</span>Dart</span>
    
        <span class="sidebar-tag-name" data-tags="Kotlin"><span class="iconfont-archer">&#xe606;</span>Kotlin</span>
    
        <span class="sidebar-tag-name" data-tags="DataBinding"><span class="iconfont-archer">&#xe606;</span>DataBinding</span>
    
        <span class="sidebar-tag-name" data-tags="Docker"><span class="iconfont-archer">&#xe606;</span>Docker</span>
    
        <span class="sidebar-tag-name" data-tags="Git"><span class="iconfont-archer">&#xe606;</span>Git</span>
    
        <span class="sidebar-tag-name" data-tags="Gradle"><span class="iconfont-archer">&#xe606;</span>Gradle</span>
    
        <span class="sidebar-tag-name" data-tags="Groovy"><span class="iconfont-archer">&#xe606;</span>Groovy</span>
    
        <span class="sidebar-tag-name" data-tags="NPM"><span class="iconfont-archer">&#xe606;</span>NPM</span>
    
        <span class="sidebar-tag-name" data-tags="travisci"><span class="iconfont-archer">&#xe606;</span>travisci</span>
    
        <span class="sidebar-tag-name" data-tags="Fragment"><span class="iconfont-archer">&#xe606;</span>Fragment</span>
    
        <span class="sidebar-tag-name" data-tags="Coroutines"><span class="iconfont-archer">&#xe606;</span>Coroutines</span>
    
        <span class="sidebar-tag-name" data-tags="Shell"><span class="iconfont-archer">&#xe606;</span>Shell</span>
    
        <span class="sidebar-tag-name" data-tags="前端"><span class="iconfont-archer">&#xe606;</span>前端</span>
    
        <span class="sidebar-tag-name" data-tags="nuxtjs"><span class="iconfont-archer">&#xe606;</span>nuxtjs</span>
    
        <span class="sidebar-tag-name" data-tags="Python"><span class="iconfont-archer">&#xe606;</span>Python</span>
    
        <span class="sidebar-tag-name" data-tags="SheetJS"><span class="iconfont-archer">&#xe606;</span>SheetJS</span>
    
        <span class="sidebar-tag-name" data-tags="Spring"><span class="iconfont-archer">&#xe606;</span>Spring</span>
    
        <span class="sidebar-tag-name" data-tags="Springboot"><span class="iconfont-archer">&#xe606;</span>Springboot</span>
    
        <span class="sidebar-tag-name" data-tags="TravisCI"><span class="iconfont-archer">&#xe606;</span>TravisCI</span>
    
        <span class="sidebar-tag-name" data-tags="MySQL"><span class="iconfont-archer">&#xe606;</span>MySQL</span>
    
        <span class="sidebar-tag-name" data-tags="Vue"><span class="iconfont-archer">&#xe606;</span>Vue</span>
    
        <span class="sidebar-tag-name" data-tags="Vite"><span class="iconfont-archer">&#xe606;</span>Vite</span>
    
        <span class="sidebar-tag-name" data-tags="ORM"><span class="iconfont-archer">&#xe606;</span>ORM</span>
    
        <span class="sidebar-tag-name" data-tags="算法"><span class="iconfont-archer">&#xe606;</span>算法</span>
    
        <span class="sidebar-tag-name" data-tags="javascript"><span class="iconfont-archer">&#xe606;</span>javascript</span>
    
        <span class="sidebar-tag-name" data-tags="SSG"><span class="iconfont-archer">&#xe606;</span>SSG</span>
    
        <span class="sidebar-tag-name" data-tags="SEO"><span class="iconfont-archer">&#xe606;</span>SEO</span>
    
    </div>
    <div class="iconfont-archer sidebar-tags-empty">&#xe678;</div>
    <div class="tag-load-fail" style="display: none; color: #ccc; font-size: 0.6rem;">
    缺失模块。<br/>
    1、请确保node版本大于6.2<br/>
    2、在博客根目录（注意不是archer根目录）执行以下命令：<br/>
    <span style="color: #f75357; font-size: 1rem; line-height: 2rem;">npm i hexo-generator-json-content --save</span><br/>
    3、在根目录_config.yml里添加配置：
    <pre style="color: #787878; font-size: 0.6rem;">
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true</pre>
    </div> 
    <div class="sidebar-tags-list"></div>
</div>
        <div class="sidebar-panel-categories">
    <div class="sidebar-categories-name">
    
        <span class="sidebar-category-name" data-categories="笔记"><span class="iconfont-archer">&#xe60a;</span>笔记</span>
    
        <span class="sidebar-category-name" data-categories="Git"><span class="iconfont-archer">&#xe60a;</span>Git</span>
    
    </div>
    <div class="iconfont-archer sidebar-categories-empty">&#xe678;</div>
    <div class="sidebar-categories-list"></div>
</div>
    </div>
</div> 
    <script>
    var siteMeta = {
        root: "/",
        author: "Apm29"
    }
</script>
    <!-- CDN failover -->
    <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
    <script type="text/javascript">
        if (typeof window.$ === 'undefined')
        {
            console.warn('jquery load from jsdelivr failed, will load local script')
            document.write('<script src="/lib/jquery.min.js">\x3C/script>')
        }
    </script>
    <script src="/scripts/main.js"></script>
    <!-- algolia -->
    
    <!-- busuanzi  -->
    
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    
    <!-- CNZZ  -->
    
    </div>
    <!-- async load share.js -->
    
        <script src="/scripts/share.js" async></script>    
     
    </body>
</html>


